@import "~scss/_mixins";

.widget.widgetView { display: flex; flex-direction: column; };
.widget.widgetView {
	.loaderWrapper { position: relative; }
	.innerWrap { height: 100%; min-height: 36px; padding-bottom: 8px; display: flex; flex-direction: column; }
	.contentWrapper { flex-grow: 1; min-height: 8px; }
	.head { padding-bottom: 0px; }
	.body { flex-grow: 1; }

	#viewSelect { padding: 0px 16px; }
	#viewSelect:empty { display: none; }
	#viewSelect {
		.select { border: none; margin: -2px 0px 2px -8px; padding-left: 8px; padding-right: 16px; max-width: calc(100% + 8px); }
		.select {
			.item { @include text-small; line-height: 18px !important; font-weight: 500; }
			.icon.arrow { 
				width: 8px !important; height: 5px !important; margin-top: -2.5px !important; background-image: url('~img/arrow/widget.svg') !important; 
				background-size: contain; right: 4px !important;
			}
		}
	}
}

.widget.widgetView.isPreview { padding: 0px; height: 100%; }
.widget.widgetView.isPreview {
	.head { margin: 0px; padding-bottom: 16px; }
	.innerWrap { padding: 0px; }

	.body { height: 100%; padding: 0px !important; }
	.body {
		.item.canDrag {
			.inner { padding-left: 0px !important; padding-right: 8px !important; width: calc(100% - 20px); }
		}
	}
}

.widget.widgetView.isClosed {
	.contentWrapper { height: 8px; }
	.innerWrap { opacity: 0; }
}

.widget.widgetView.isPreview {
	.viewGallery {
		.body { padding: 0px !important; }
		.ReactVirtualized__List { padding: 4px 16px; }
	}
}

.widget.widgetView {
	@import "./board";
	@import "./calendar";
	@import "./gallery";
	@import "./list";
	@import "./graph";
}